<template>
	<view class="add_container">
		<view class="add_info display align-items">
			<view class="add_info_left">收件人</view>
			<input type="text" class="add_info_right" v-model="consignee" placeholder="收货人姓名">
		</view>
		<view class="add_info display align-items">
			<view class="add_info_left">手机号</view>
			<input type="number" maxlength="11" v-model="mobile" class="add_info_right" placeholder="收货人手机号">
		</view>
		<view class="add_info display align-items" @click="choseAddress">
			<view class="add_info_left">所在地区</view>
			<view class="add_info_right display align-items space-between">
				<view class="add_info_right_name" v-if="addNameList.length==0">请选择</view>
				<view class="" v-else>{{addNameList[0]}}-{{addNameList[1]}}-{{addNameList[2]}}</view>
				<image class="add_info_right_icon" src="../../../static/icon/right.png"></image>
			</view>
		</view>
		<view class="add_info display align-items">
			<view class="add_info_left">详细地址</view>
			<input type="text" class="add_info_right" v-model="address" placeholder="如街道、小区、门牌号等">
		</view>
		<view class="isdefult display space-between align-items">
			<view class="add_info_left_angain">设为默认地址</view>
			<switch color="#294D7C" style="transform: scale(0.8,0.8)" class="section-right" :checked="treatmentStatu.checked"
			 @change="switchChange" />
		</view>

		<!--编辑地址的时候显示 -->
		<view class="isdefult display space-between align-items" v-if="id!=0" @click="delAddress">
			<view class="add_info_delet">删除地址</view>
		</view>

		<!-- 选择地址 弹窗 -->
		<uni-popup ref="popup" type="bottom">
			<view class="popup" style="height: 600px;">
				<view class="picker-btn">
					<view class="left" @click="cancel">取消</view>
					<view class="right" @click="confrim">确定</view>
				</view>
				<view style="height: 500rpx;">
					<picker-view :indicator-style="indicatorStyle" :value="valueArr" @change="bindChange">
						<picker-view-column>
							<view class="item" v-for="(item,index) in province" :key="index">{{item.name}}</view>
						</picker-view-column>
						<picker-view-column v-if="province[valueArr[0]]">
							<view class="item" v-for="(item,index) in province[valueArr[0]].children" :key="index">{{item.name}}</view>
						</picker-view-column>
						<picker-view-column v-if="province[valueArr[0]]">
							<view class="item" v-for="(item,index) in province[valueArr[0]].children[valueArr[1]].children" :key="index">{{item.name}}</view>
						</picker-view-column>
					</picker-view>
				</view>

			</view>
		</uni-popup>
		<view class="btn display align-items space-center letter-spacing" @click="addAddressBtn">保存</view>
		<is-login v-on:childClick='listenToClose' v-on:childClickAgain='listenToCloseAgain' v-if="isLogin==0"></is-login>
	</view>
</template>


<script>
	import isLogin from '../../../components/isLogin.vue'
	import {
		uniPopup
	} from '@dcloudio/uni-ui'
	export default {
		components: {
			isLogin,
			uniPopup
		},
		data() {
			return {
				treatmentStatu: {
					checked: false
				},
				indicatorStyle: `height: ${Math.round(uni.getSystemInfoSync().screenWidth/(750/100))}px;`,
				valueArr: [0, 0, 0], // 用于判断当前滑动的是哪一列
				province: [], // 数据列表
				id: 0,
				addaddressId: [],
				addNameList: [],
				consignee: "",
				mobile: '',
				address: '',
				province_id: '',
				city_id: '',
				county_id: '',
				is_default: 0,
				isLogin: 1
			}
		},
		onLoad(option) {
			if (!uni.getStorageSync('openid')) {
				this.isLogin = 0
			} else {
				var id = option.id
				this.id = id
				if (id == 0) {
					uni.setNavigationBarTitle({
						title: '新建地址'
					});
				} else {
					uni.setNavigationBarTitle({
						title: '编辑地址'
					});
					this.getAddressEdit(id)
				}
			}
		},
		mounted() {
			this.initLoadArea()
		},
		methods: {
			// 获取地址详情
			getAddressEdit(id) {
				let that = this
				var data = {
					openid: uni.getStorageSync('openid'),
					id: id
				}
				this.$myRequest.post(this.$api.address.getAddressUrl, data).then(res => {
					if (res.code == '200') {
						var address = res.data.data
						this.consignee = address.consignee
						this.mobile = address.mobile
						this.address = address.address
						this.addNameList = [address.province_name, address.city_name, address.county_name]
						this.addaddressId = [address.province_id, address.city_id, address.county_id]
						this.is_default = address.is_default
						if (address.is_default == 0) {
							this.treatmentStatu.checked = false
						} else {
							this.treatmentStatu.checked = true
						}
					} else {
						uni.showToast({
							title: res.msg,
							icon: "none"
						})
					}
				})
			},
			// 打开选择地址的弹窗
			choseAddress() {
				this.$refs.popup.open()
			},
			// 获取省市区
			initLoadArea() {
				var data = {
					parent_id: 0
				}
				this.$myRequest.post(this.$api.address.getRegionListUrl, data).then(res => {
					if (res.code == '200') {
						this.province = res.data.data
						this.loadCity(this.province[0].id)
					} else {
						uni.showToast({
							title: res.msg,
							icon: "none"
						})
					}
				})
			},
			loadCity(parentId) {
				var data = {
					parent_id: parentId
				}
				this.$myRequest.post(this.$api.address.getRegionListUrl, data).then(res => {
					if (res.code == '200') {
						if (this.province[this.valueArr[0]].children === undefined) {
							this.$set(this.province[this.valueArr[0]], 'children', [])
							res.data.data.forEach(item => {
								this.province[this.valueArr[0]].children.push(item)
							})
							this.loadArea(this.province[this.valueArr[0]].children[this.valueArr[1]].id)
						}
					} else {
						uni.showToast({
							title: res.msg,
							icon: "none"
						})
					}
				})
			},
			loadArea(parentId) {
				var data = {
					parent_id: parentId
				}
				this.$myRequest.post(this.$api.address.getRegionListUrl, data).then(res => {
					if (res.code == '200') {
						this.area = res.data.data;
						if (this.province[this.valueArr[0]].children[this.valueArr[1]].children === undefined) {
							this.$set(this.province[this.valueArr[0]].children[this.valueArr[1]], 'children', [])
							res.data.data.forEach(item => {
								this.province[this.valueArr[0]].children[this.valueArr[1]].children.push(item)
							})
						}
					} else {
						uni.showToast({
							title: res.msg,
							icon: "none"
						})
					}
				})
			},
			bindChange(e) {
				var val = e.detail.value;
				if (this.valueArr[0] !== val[0]) {
					this.loadCity(this.province[val[0]].id)
				} else if (this.valueArr[1] !== val[1]) {
					this.loadArea(this.province[val[0]].children[val[1]].id)
				}
				this.valueArr = val
			},
			// 关闭弹窗
			cancel() {
				this.$refs.popup.close();
			},
			// 確認地址
			confrim() {
				let data = [];
				let addName = []
				data[0] = this.province[this.valueArr[0]].id
				data[1] = this.province[this.valueArr[0]].children[this.valueArr[1]].id
				data[2] = this.province[this.valueArr[0]].children[this.valueArr[1]].children[this.valueArr[2]].id
				addName[0] = this.province[this.valueArr[0]].name
				addName[1] = this.province[this.valueArr[0]].children[this.valueArr[1]].name
				addName[2] = this.province[this.valueArr[0]].children[this.valueArr[1]].children[this.valueArr[2]].name
				this.addaddressId = data
				this.addNameList = addName
				this.$refs.popup.close();
			},
			// 是否默認
			switchChange(e) {
				let value = e.target.value
				if (!value) {
					this.is_default = 0
				} else {
					this.is_default = 1
				}
			},

			// 删除地址
			delAddress() {
				let that = this
				var data = {
					openid: uni.getStorageSync('openid'),
					id: that.id
				}
				uni.showModal({
					title: '提示',
					content: '是否删除该地址',
					success: function(res) {
						if (res.confirm) {
							that.$myRequest.post(that.$api.address.delAddressUrl, data).then(res => {
								if (res.code == '200') {
									uni.showToast({
										title: '删除成功',
										icon: "success",
										success() {
											setTimeout(function() {
												uni.navigateBack()
											}, 1500)

										}
									})
								} else {
									uni.showToast({
										title: res.msg,
										icon: "none"
									})
								}
							})
						} else if (res.cancel) {

						}
					}
				});
			},
			// 新建地址
			addAddressBtn() {
				let that = this
				var reg_tel = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
				if (that.consignee == '') {
					return uni.showToast({
						title: '请输入姓名',
						icon: "none"
					})
				}
				if (!reg_tel.test(that.mobile)) {
					return uni.showToast({
						title: '请输入正确的手机号',
						icon: "none"
					})
				}
				if (that.mobile == '') {
					return uni.showToast({
						title: '请输入您的手机号',
						icon: "none"
					})
				}
				if (that.address == '') {
					return uni.showToast({
						title: '请输入您的详细地址',
						icon: "none"
					})
				}
				if (this.addaddressId.length == 0) {
					return uni.showToast({
						title: '请选择您的所在地',
						icon: "none"
					})
				}
				var province_id = this.addaddressId[0]
				var city_id = this.addaddressId[1]
				var county_id = this.addaddressId[2]
				if (that.id == 0) {
					// 新建
					var data = {
						openid: uni.getStorageSync('openid'),
						consignee: that.consignee,
						mobile: that.mobile,
						address: that.address,
						province_id: province_id,
						city_id: city_id,
						county_id: county_id,
						is_default: that.is_default
					}
					this.$myRequest.post(this.$api.address.addAddressUrl, data).then(res => {
						if (res.code == '200') {
							uni.showToast({
								title: '添加成功',
								icon: "success",
								success() {
									setTimeout(function() {
										uni.navigateBack()
									}, 1500)
								}
							})
						} else {
							uni.showToast({
								title: res.msg,
								icon: "success"
							})
						}
					})
				} else {
					// 编辑
					var data = {
						openid: uni.getStorageSync('openid'),
						consignee: that.consignee,
						mobile: that.mobile,
						address: that.address,
						province_id: province_id,
						city_id: city_id,
						county_id: county_id,
						is_default: that.is_default,
						id: this.id
					}
					this.$myRequest.post(this.$api.address.editAddressUrl, data).then(res => {
						if (res.code == '200') {
							uni.showToast({
								title: '修改成功',
								icon: "success",
								success() {
									setTimeout(function() {
										uni.navigateBack()
									}, 1500)

								}
							})
						} else {
							uni.showToast({
								title: res.msg,
								icon: "none"
							})
						}
					})
				}
			},
			listenToClose(msg) {
				this.isLogin = msg
			},
			listenToCloseAgain() {
				var id = this.id
				this.getAddressEdit(id)
			},
		}
	}
</script>

<style lang="scss" scoped>
	.popup {
		height: fit-content;
		width: 100%;
		background: #fff;
	}

	.picker-btn {
		display: flex;
		height: 100upx;
		width: 100%;
		line-height: 100upx;
		background: #fff;
		font-size: 34upx;
		z-index: 1;
		border-bottom: 1rpx solid #f8f8f8;

		.left {
			flex: 1;
			color: #0076FF;
			padding-left: 40upx;
			box-sizing: border-box;
		}

		.right {
			flex: 1;
			text-align: right;
			padding-right: 40upx;
			color: #FE4533;
			box-sizing: border-box;
		}
	}

	picker-view {
		width: 100%;
		height: 500rpx;
		display: relative;
	}

	.item {
		line-height: 100rpx;
		text-align: center;
	}

	.add_container {
		width: 690rpx;
		margin: auto;

		.add_info_left {
			width: 159rpx;
			font-size: 28rpx;
		}

		.add_info_left_angain {
			color: #333;
			font-size: 28rpx;
		}

		.add_info {
			padding: 30rpx 0;
			border-bottom: 1px solid #E5E5E5;

			.add_info_right {
				width: 500rpx;
				font-size: 26rpx;
				color: #666;

				.add_info_right_icon {
					width: 25rpx;
					height: 25rpx;
					margin-left: 15rpx;
				}
			}

		}

		.isdefult {
			padding: 15rpx 0;
		}

		.add_info_delet {
			color: #294D7C;
			font-size: 26rpx;
		}
	}
</style>
